<template>
  <div class="singer-album">
    <div class="album-slide">
      <el-row :gutter="40" style="width: 100%">
        <el-col :span="12" style="text-align: right">
          <div class="singer-img">
            <img :src="attachImageUrl(singer.pic)" /></div
        ></el-col>
        <el-col :span="12" style="padding: 15px 0"></el-col>
          <ul class="info">
            <li><span style="color: #0080ff;">姓名：{{ singer.name }}</span></li>
            <li v-if="singer.sex == 0 || singer.sex == 1">
              性别：{{ attachSex(singer.sex) }}
            </li>
            <li>生日：{{ attachBirth(singer.birth) }}</li>
            <li>故乡：{{ singer.location }}</li>
          </ul></el-col
        >
      </el-row>
    </div>
    <div class="album-content">
      <div class="intro">
        <h2>简介：</h2>
        <span>{{ singer.introduction }}</span>
      </div>
      <div class="content">
        <album-content :songList="listOfSongs">
          <template slot="title">乐馆</template>
        </album-content>
      </div>
    </div>
  </div>
</template>
<script>
import { mixin } from "../mixins";
import { mapGetters } from "vuex";
import { songOfSingerId } from "../api/index";
import AlbumContent from "../components/AlbumContent";
export default {
  name: "singer-album",
  mixins: [mixin],
  components: {
    AlbumContent,
  },
  data() {
    return {
      singerId: "", //前面传来的歌手id
      singer: {}, //当前歌手信息
    };
  },
  computed: {
    ...mapGetters([
      "listOfSongs", //当前播放列表
      "tempList", //当前歌手对象
      "loginIn", //用户是否已登录
      "userId", //当前登录用户id
    ]),
  },
  created() {
    this.singerId = this.$route.params.id;
    this.singer = this.tempList;
    this.getSongOfSingerId();
  },
  methods: {
    //根据歌手id查询乐馆
    getSongOfSingerId() {
      songOfSingerId(this.singerId)
        .then((res) => {
          this.$store.commit("setListOfSongs", res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //获取性别
    attachSex(value) {
      if (value == 0) {
        return "女";
      } else if (value == 1) {
        return "男";
      }
      return "";
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/css/singer-album.scss";
</style>
